<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/harmonise.css" type="text/css" />
<link rel="stylesheet" href="../css/base-groups.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<![endif]-->
<title>Rounded corner box using border radius | Chapter 4 | CSS Mastery </title>
<style  type="text/css">

/* Pretty */


.box {
	width: 30em;
	background-color: #89ac11;
	color: #fff;
	padding: 2em 2em 1em 2em;
	margin-top: 2em;
}

h2 {
	margin-top: 0;
	font-size: 1.6em;
}

/* Example */

.box {
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
}

</style>
</head>
<body>

<div class="box">
<h2>My Other Box Also Has Rounded Corners</h2>
<p>This is another rounded corner box. Isn't it fab! I think it's the best rounded corner box since my last one. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? What's more, this ones doesn't use images either. Instead the corners are generated by the browser. How modern. Pretty soon we'll all be flying around in jet-packs I tell you!</p>
</div>


</body>
</html>